
import React from 'react'

class WechatLinkEdit extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      data: {}
    }
  }

  componentDidMount() {

  }

  componentWillReceiveProps(props) {
    this.setState({
      data: props.data
    })
  }

  onSelectOpen(is_open) {
    var data = this.state.data
    data.is_open = is_open
    this.setState({
      data: data
    })
  }

  onSelectBind(need_bind) {
    var data = this.state.data
    data.need_bind = need_bind
    this.setState({
      data: data
    })
  }

  onDataSubmit() {
    var data = this.state.data;
    this.props.onDataSubmit({
      id: this.props.data.id,
      is_open: data.is_open,
      need_bind: data.need_bind
    })
  }



  render() {
    var self = this;
    var is_open = self.state.data?self.state.data.is_open: null,
        need_bind = self.state.data?self.state.data.need_bind: null
    return (
      <div className="modal fade" id="unitSettingEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div className="modal-dialog " role="document">
          <div className="modal-content">
            <div className="modal-header">
              <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 className="modal-title" id="unit-modal-label">微信链接配置</h4>
            </div>
            <div className="modal-body">
              <div className="form-group">
                <label for="role-url-permission">开启/关闭链接</label>
                <div className="dropdown">
                  <button className="btn btn-default dropdown-toggle" type="button" ref="roleUrlPermissionDown"
                          id='role-url-permission-down' data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" >
                    <span>{is_open?"开启":"关闭"}</span>
                    <span className="caret"></span>
                  </button>
                  <ul ref="roleUrlPermission" id="role-url-permission"  className="dropdown-menu" aria-labelledby="role-url-permission">
                    <li><a onClick={(event)=>this.onSelectOpen(true)}>开启</a></li>
                    <li><a onClick={(event)=>this.onSelectOpen(false)}>关闭</a></li>
                  </ul>
                </div>
              </div>
              <div className="form-group">
                <label for="role-url-permission">需要绑定户号</label>
                <div className="dropdown">
                  <button className="btn btn-default dropdown-toggle" type="button" ref="roleUrlPermissionDown"
                          id='role-url-permission-down' data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    <span>{need_bind?"需要":"不需要"}</span>
                    <span className="caret"></span>
                  </button>
                  <ul ref="roleUrlPermission" id="role-url-permission"  className="dropdown-menu" aria-labelledby="role-url-permission">
                    <li><a onClick={(event)=>this.onSelectBind(true)}>需要绑定</a></li>
                    <li><a onClick={(event)=>this.onSelectBind(false)}>不需要绑定</a></li>
                  </ul>
                </div>
              </div>
            </div>
            <div className="modal-footer">
              <button type="button" className="btn btn-default" data-dismiss="modal">取消</button>
              <button type="button" className="btn btn-primary"
                      onClick={(event)=> this.onDataSubmit()}>保存</button>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default WechatLinkEdit
